<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频兔兔</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css?v=20181108">
    <link rel="stylesheet" href="css/index.css?v=20181108">
    <link href="https://cdn.bootcss.com/Swiper/4.4.0/css/swiper.min.css" rel="stylesheet">
</head>
<body>
    <div class="wrap">
        <!--页面头部-->
        <header class="header">
            <section class="logo">
                <div class="logo-img">
                    <img src="images/logo.png" alt="">
                </div>

                <span class="btn" id="btn"></span>
            </section>
            <!--导航-->
            <section class="nav">

                <nav>
                    <a href="index.html">
                        <img src="images/index.png" alt="">产品首页
                    </a>
                    <a href="product.html">
                        <img src="images/gn.png" alt="">产品功能
                    </a>
                    <a href="buy.html">
                        <img src="images/money.png" alt="">产品定价
                    </a>
                    <a href="pctip.html">
                        <img src="images/pc.png" alt="">实际功能请使用PC端体验
                    </a>
                </nav>
            </section>

        </header>
        <!--主体-->
        <main class="mar88">
            <!--videototo-->
            <section class="videototo">
                <h1>视频兔兔</h1>
                <h2>内容运营与营销工具</h2>
                <p>提升效率/降低成本/效果翻倍</p>
                <a href="pctip.html">免费体验</a>
            </section>
            <!--swiper功能介绍等-->
            <section class="product">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide fabu">
                            <a>一键发布</a>
                            <p>全面支持视频与图文两种内容形式，一键发布至全网95%主流平台，以优质的渠道资源实现全网覆盖，轻松实现媒体矩阵大布局，最大化增加</p>
                        </div>
                        <div class="swiper-slide acc">
                            <a>帐号管理</a>
                            <p>多平台帐号统一管理，帐号密码云级安全托管，创建栏目管理帐号，轻松实现全网帐号一键登录。</p>
                        </div>
                        <div class="swiper-slide data">
                            <a>数据统计</a>
                            <p>全网数据监测评估，多维度数据分析与汇集，每一个数据都可做出更高反馈，全面提升内容发布效果和品牌价值。一键生成报表反馈，汇报成果</p>
                        </div>
                        <div class="swiper-slide marke">
                            <a>精准营销</a>
                            <p>通过群像标签来扩大算法精准至目标群体。追踪和分析传播数据，指导和优化媒介计划，为广告主找到更精准的投放策略，避免盲目投放。</p>
                        </div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <!--<div class="swiper-pagination"></div>-->
                </div>
            </section>
            <!--swiper他们也在用-->
            <section class="our">
                <a>他们也在用</a>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <li>
                                <img src="images/1.png" alt="">
                            </li>
                            <li>
                                <img src="images/2.png" alt="">
                            </li>
                            <li>
                                <img src="images/3.png" alt="">
                            </li>
                        </div>
                        <div class="swiper-slide">
                            <li>
                                <img src="images/4.png" alt="">
                            </li>
                            <li>
                                <img src="images/5.png" alt="">
                            </li>
                            <li>
                                <img src="images/6.png" alt="">
                            </li>
                        </div>
                        <div class="swiper-slide">
                            <li>
                                <img src="images/7.png" alt="">
                            </li>
                            <li>
                                <img src="images/8.png" alt="">
                            </li>
                            <li>
                                <img src="images/9.png" alt="">
                            </li>
                        </div>
                        <div class="swiper-slide">
                            <li>
                                <img src="images/10.png" alt="">
                            </li>
                            <li>
                                <img src="images/11.png" alt="">
                            </li>
                            <li>
                                <img src="images/12.png" alt="">
                            </li>
                        </div>
                        <div class="swiper-slide">
                            <li>
                                <img src="images/13.png" alt="">
                            </li>
                            <li>
                                <img src="images/14.png" alt="">
                            </li>
                            <li>
                                <img src="images/15.png" alt="">
                            </li>
                        </div>
                        <div class="swiper-slide">
                            <li>
                                <img src="images/16.png" alt="">
                            </li>
                            <li>
                                <img src="images/17.png" alt="">
                            </li>
                            <li>
                                <img src="images/18.png" alt="">
                            </li>
                        </div>
                    </div>
                </div>
            </section>
        </main>
      <!--页面尾部-->
        <footer class="footer">
            <a>客服微信vidtoto</a>
            <img src="images/wechat-code.png" alt="" class="wechat">
            <p><img src="images/beian.png" alt="">闽公网安备 35020302033034号</p>
            <p>©闽ICP备13018967  厦门市女帝信息科技有限公司</p>
        </footer>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/Swiper/4.4.0/js/swiper.min.js"></script>
</body>
<script>
    var mySwiper = new Swiper ('.product >.swiper-container', {
        autoplay: {
            delay: 3000,
            disableOnInteraction:false,// 切换后自己自动执行autoplay
        },//可选选项，自动滑动
        loop: true, // 循环模式选项
    })
    var mySwiper2 = new Swiper ('.our >.swiper-container', {
        autoplay: {
            delay: 2000,
            disableOnInteraction:false,// 切换后自己自动执行autoplay
        },//可选选项，自动滑动
        loop: true, // 循环模式选项
    })

    $('#btn').click(function () {
        if($('.nav').is(':hidden')){
            $('.nav').css({'display':'block'})
            $(this).css({'background':"url('../images/close.png')no-repeat"})
        }else{
            $('.nav').css({'display':'none'})
            $(this).css({'background':"url('../images/more.png')no-repeat"})
        }
    })
</script>
</html>
